/* components */
import { SettingGPTViewTable } from '@src/modules/setting/gpt/components'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { 
  SettingGPTChatTypeCNNmaeEnum,
  SettingGPTChatTypeEnum,
  SettingGPTQuestionTypeCNNmaeEnum, 
  SettingGPTQuestionTypeEnum, 
  SettingGPTStatusCNNmaeEnum, 
  SettingGPTStatusEnum
} from '@src/modules/setting/gpt/model'
/* vue */
import { defineComponent, PropType } from 'vue'

enum SettingGPTQuestionViewSelectEventEnum {
  ChangeChatType = 'changeChatType',
  ChangeStatus = 'changeStatus'
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTQuestionViewSelect,
  props: {
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    chatType: {
      type: String as PropType<SettingGPTChatTypeEnum | string>,
    },
    status: {
      type: String as PropType<SettingGPTStatusEnum | string>,
    },
    onChangeChatType: {
      type: Function
    },
    onChangeStatus: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
  },
  computed: {
    chatTypeOptions(): Record<string, string>[] {
      return [
        {
          label: SettingGPTChatTypeCNNmaeEnum[SettingGPTChatTypeEnum.Bao],
          value: SettingGPTChatTypeEnum.Bao
        }
      ]
    },
    statusOptions(): Record<string, string>[] {
      return [
        {
          label: SettingGPTStatusCNNmaeEnum[SettingGPTStatusEnum.Resolved],
          value: SettingGPTStatusEnum.Resolved
        },
        {
          label: SettingGPTStatusCNNmaeEnum[SettingGPTStatusEnum.Unresolved],
          value: SettingGPTStatusEnum.Unresolved
        }
      ]
    }
  },
  methods: {
    onChangeChatTypeHandler(value: SettingGPTChatTypeEnum) {
      this.$emit(SettingGPTQuestionViewSelectEventEnum.ChangeChatType, value)
    },
    onChangeStatusHandler(value: SettingGPTStatusEnum) {
      this.$emit(SettingGPTQuestionViewSelectEventEnum.ChangeStatus, value)
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTQuestionViewSelect}>
        
        <div class="setting-gpt-question-view-select-item">
          <span class="setting-gpt-question-view-select-item-label">
            会话类型
          </span>
          <el-select
            disabled={this.disabled}
            value={this.chatType}
            clearable
            placeholder="请选择"
            onChange={this.onChangeChatTypeHandler}
          >
            {
              this.chatTypeOptions.map((item) => (
                <el-option
                  label={item.label}
                  value={item.value}
                />
              ))
            }
          </el-select>
        </div>
        
        <div class="setting-gpt-question-view-select-item">
          <span class="setting-gpt-question-view-select-item-label">
            状态
          </span>
          <el-select
            disabled={this.disabled}
            value={this.status}
            clearable
            placeholder="请选择"
            onChange={this.onChangeStatusHandler}
          >
            {
              this.statusOptions.map((item) => (
                <el-option
                  label={item.label}
                  value={item.value}
                />
              ))
            }
          </el-select>
        </div>
        
      </div>
    )
  }
})